<template>
    <div class="container">
        <div id="map" class="map"></div>
    </div>
</template>

<script lang="ts" setup>
import { Feature, Map, View } from 'ol';
import { Vector as VectorLayer } from 'ol/layer';
import TileLayer from 'ol/layer/Tile';
import { Vector as VectorSource, XYZ } from 'ol/source';
import { Fill, Icon, Stroke, Style } from 'ol/style';
import { onMounted, ref } from 'vue';
import { Circle, LineString, Point, Polygon } from 'ol/geom';
import { Select, DragBox } from 'ol/interaction';
import icon1 from '@/assets/icon1.png';
import {
    click,
    noModifierKeys,
    platformModifierKeyOnly
} from 'ol/events/condition';

const map = ref();
const source = ref();
const layer = ref();
const select = ref();
const type = ref();
type.value = 'Point';

const selectStyle = new Style({
    fill: new Fill({ color: [255, 0, 128, 0.5] }),
    stroke: new Stroke({
        color: [255, 0, 128, 0.5],
        width: 5
    })
});

const style = new Style({
    fill: new Fill({
        color: '#eeeeee'
    })
});

function initMap() {
    map.value = new Map({
        target: 'map',
        view: new View({
            center: [116.397477, 39.908692],
            projection: 'EPSG:4326',
            zoom: 12
        }),
        layers: [
            new TileLayer({
                source: new XYZ({
                    url: `http://wprd0{1-4}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=1&style=7`
                })
            })
        ]
    });

    source.value = new VectorSource({ wrapX: true });
    layer.value = new VectorLayer({
        source: source.value,
        style: style
    });
    map.value.addLayer(layer.value);

    // select.value = new Select({
    //     // style: selectStyle,
    //     condition: click,
    //     style: function (feature) {
    //         const color = feature.get('COLOR_BIO') || [255, 0, 128, 0.5];
    //         selectStyle.getFill().setColor(color);
    //         return selectStyle;
    //     }
    // });
    // map.value.addInteraction(select.value);

    const dragBox = new DragBox({
        condition: platformModifierKeyOnly
        // condition: noModifierKeys, // 鼠标左键框选
    });
    map.value.addInteraction(dragBox);

    // let selectedFeatures = select.value.getFeatures();

    dragBox.on('boxstart', () => {
        console.log('boxstart===');
        // selectedFeatures.clear();
    });

    // 监听框选结束事件
    // dragBox.on('boxend', function (event) {
    //     console.log('boxend===');
    //     const extent = event.target.getGeometry().getExtent(); // 获取框选范围
    //     const features = layer.value.getSource().getFeaturesInExtent(extent); // 获取框选范围内的要素

    //     console.log(features, features.length, 'features=', extent);
    //     // 处理选中的要素（例如，改变样式或输出信息）
    //     features.forEach(function (feature) {
    //         console.log(feature.getProperties()); // 输出要素属性
    //         // 可以根据需要修改要素样式等
    //     });
    // });

    addPoint();
    addCircle();
    addLine();
    addPolygon();
}

function addCircle() {
    const circle = new Circle([116.26127111143933, 39.88827811324119], 0.05); //定位到廊坊
    const feature = new Feature(circle);

    source.value.addFeature(feature);

    // const circleLayer = new VectorLayer({
    //     source: new VectorSource()
    // });
    // layer.value.getSource()?.addFeature(feature);
    // map.value.addLayer(circleLayer);
}

function addPoint() {
    const point = new Point([116.33609322877383, 39.94266493515321]);
    const feature = new Feature(point);
    const pointLayer = new VectorLayer({
        source: new VectorSource(),
        style: new Style({
            image: new Icon({
                width: 32,
                height: 32,
                src: icon1
            })
        })
    });
    pointLayer.getSource()?.addFeature(feature);
    map.value.addLayer(pointLayer);
}

function addPolygon() {
    const polygon = new Polygon([
        [
            [116.43216382433918, 39.96121634570942],
            [116.54755761620021, 39.96094163943564],
            [116.57585657830313, 39.922206729167236],
            [116.47639812798847, 39.92962403958937]
        ]
    ]);
    const feature = new Feature(polygon);
    const polygonLayer = new VectorLayer({
        source: new VectorSource()
    });
    polygonLayer.getSource()?.addFeature(feature);
    map.value.addLayer(polygonLayer);
}

function addLine() {
    const line = [
        [116.38683054896521, 39.87456025428983],
        [116.41485476813696, 39.89980111685351],
        [116.43518603850514, 39.87428589083127],
        [116.4516708868754, 39.89541139570954],
        [116.47337589286099, 39.87620639317763]
    ];
    const lineString = new LineString(line);
    const feature = new Feature(lineString);
    const lineLayer = new VectorLayer({
        source: new VectorSource(),
        style: new Style({
            fill: new Fill({
                color: [123, 234, 88, 0.2]
            }),
            stroke: new Stroke({
                color: [66, 185, 131, 0.6],
                width: 4
            })
        })
    });
    lineLayer.getSource()?.addFeature(feature);
    map.value.addLayer(lineLayer);
}

onMounted(() => {
    initMap();
});
</script>

<style lang="scss">
.container {
    width: 100%;
    height: 100%;
    position: relative;
    .map {
        width: 100%;
        height: 100%;
    }
    .side {
        position: absolute;
        top: 10px;
        left: 50px;
    }
}
</style>